<template>
	<view :class="listClass">
		<view :class="{fww:col>1}">
			<slot />
		</view>
		<view v-if="state==2&&list.length==0" class="fjc" :style="{height: height+'vh'}">
			<u-empty :text="text" :mode="icon" />
		</view>
		<view v-else-if="state==1&&list.length==0&&page==1" class="fjc" :style="{height: height+'vh'}">
			<Loading />
		</view>
		<view v-else-if="state==1&&list.length>0&&page>1" class="fjc py6">
			<text class="icon fs50 c9">&#xe693;</text>
			<text class="ml4 c9">加载中</text>
		</view>
		<view v-else-if="page>1&&list.length>0&&list.length==total" class="fjc py6">
			<text class="c9">到底啦~</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		col: {
			type: [String, Number],
			default: 1
		},
		text: {
			type: String,
			default: '暂无内容哦~'
		},
		icon: {
			type: String,
			default: 'data'
		},
		height: {
			type: [String, Number],
			default: 70
		},
		listClass: {
			type: String,
			default: 'px4'
		}
	},
	computed: {
		state() {
			if(this.$props.state){
				return this.$props.state
			}
			// #ifdef H5
			return this.$parent.$parent.loadstate
			// #endif
			// #ifndef H5
			return this.$parent.loadstate
			// #endif
		},
		list() {
			if(this.$props.list){
				return this.$props.list
			}
			// #ifdef H5
			return this.$parent.$parent.list
			// #endif
			// #ifndef H5
			return this.$parent.list
			// #endif
		},
		page() {
			if(this.$props.page){
				return this.$props.page
			}
			// #ifdef H5
			return this.$parent.$parent.page
			// #endif
			// #ifndef H5
			return this.$parent.page
			// #endif
		},
		total() {
			if(this.$props.total){
				return this.$props.total
			}
			// #ifdef H5
			return this.$parent.$parent.total
			// #endif
			// #ifndef H5
			return this.$parent.total
			// #endif
		}
	}
}
</script>